<template>
  <section class="card" v-show="isShow">
    <div class="box fs d-flex align-items-center">
      <p>字号</p>
      <div class="fs-tool d-flex text-center align-items-center">
        <h2 class="mul flex-1" @click.stop="changeSize('mul')">-</h2>
        <h2 class="fontSize flex-1">{{fs}}</h2>
        <h2 class="add flex-1" @click.stop="changeSize('add')">+</h2>
      </div>
    </div>

    <div class="box color-tool theme d-flex">
      <p>主题</p>
      <div class="colors flex-2">
        <em class="circle default" @click.stop="changeColor('default')"></em>
        <em class="circle white" @click.stop="changeColor('white')"></em>
        <em class="circle black" @click.stop="changeColor('black')"></em>
        <em class="circle gray" @click.stop="changeColor('gray')"></em>
        <em class="circle yellow" @click.stop="changeColor('yellow')" ></em>
        <em class="circle red" @click.stop="changeColor('red')"></em>
        <em class="circle green" @click.stop="changeColor('green')"></em>
        <em class="circle blue" @click.stop="changeColor('blue')"></em>
      </div>
    </div>
  </section>
</template>

<script>
import bus from "utils/EventBus";

import { mapState, mapMutations } from 'vuex'

export default {
  name: "ReaderSetting",
  props: {
    isShowToolbar: Boolean
  },
  data() {
    return {
      isShow: false
    };
  },
  computed: {
    ...mapState(['fs', 'colors'])
  },
  methods: {
    changeShowTag() {
      this.isShow = !this.isShow;
    },
    changeSize(type) {
      let oFontSize = Number(this.fs)

      if('add' === type) {
        if(oFontSize >= 28)
          return;

        oFontSize = oFontSize + 2
      } else if('mul' === type) {
        if(oFontSize <= 14)
          return;

        oFontSize = oFontSize - 2
      }

      this.saveFontSize(oFontSize)
    },
    changeColor (color) {
      this.saveColors(color);
    },
    ...mapMutations(['saveFontSize', 'saveColors'])
  },
  created() {
    bus.$on("notifySettingShow", () => {
      this.changeShowTag();
    });
  },
  watch: {
    isShowToolbar (newIsShowToolbar) {
      if(!newIsShowToolbar) {
        this.isShow = false
        this.$emit('notifyChangeBottom', this.isShow)
      }
    },
    isShow (newIsShow) {
      if(!newIsShow) {
        this.$emit('notifyChangeBottom', true)
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  padding: 3vw;
  color: #FFF;
  z-index 9999

  .box {
    p {
      width: 12vw;
    }
  }

  
  .fs-tool {
    margin-bottom 3vw
    width: 88vw;

    .add, .mul {
      border: 2px solid #ccc;
      border-radius: 15px;
      padding: 3px 0;
    }

    .fontSize {
      font-size: 20px;
    }
  }

  .color-tool {
    margin-top 3vw
    .colors {
      overflow-x: auto;
      white-space: nowrap;
      line-height 35px

      em {
        display inline-block
        width 35px
        height 35px 
        border-radius 50%
        margin: 0 8px;

        &:first-of-type{
          margin-left 0
        }
        &:last-of-type{
          margin-right 0
        }
      }
    }
  }
}
</style>
